﻿<div class="layui-card" id="lg-TemplateList">
    <div class="layui-card-header"><i class="fa fa-home fa-fw"></i>模板列表</div>
    <div class="layui-card-body" id="">
        <div class="lg-form-box">
            <table class="layui-hide" id="TemplateList" lay-filter="TemplateList"></table>
        </div>
        <!-- 内容主体区域结束 -->
    </div>
</div>
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add"><i class="fa fa-plus fa-fw"></i>添加</button>
        <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="refresh"><i class="fa fa-refresh fa-fw"></i>刷新</button>
    </div>
</script>
<script type="text/html" id="btTpl">
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit" title="编辑"><span class="fa fa-pencil-square-o fa-fw "></span></a>
    <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="del" title="删除"><span class="fa fa-trash-o fa-fw"></span></a>
</script>
<script>
    frame.createPage({
        mounted: function() {
            var page = this;
            page.vm = Vue.createApp({
                data() {
                    return {
                        pageId: page.id,
                    }
                },
                mounted: function() {
                    this.TableRender();
                },
                methods: {
                    TableRender: function() {
                        layui.use(['table', 'element', 'form'], function() {
                            var table = layui.table;
                            var form = layui.form;
                            form.render();
                            page.laytable = table.render({
                                elem: '#TemplateList'
                                , url: '/api/sys/recruit/GetTemplateList'
                                , toolbar: '#toolbar' //开启头部工具栏，并为其绑定左侧模板
                                , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                                , cols: [[
                                    {
                                        field: 'rownum', title: '#', width: 60, templet: function(d) {
                                            return d.LAY_TABLE_INDEX + 1
                                        }
                                    },
                                    {
                                        field: 'Id', title: 'Id', width: 60
                                    },
                                    {
                                        field: 'Name', title: '模板名称', width: 200
                                    }
                                    , {
                                        field: 'Type', title: '模板类型', width: 150, templet: function(d) {
                                            switch (d.Type) {
                                                case 0:
                                                    return "通用版";
                                                    break;
                                                case 1:
                                                    return "电脑版";
                                                    break;
                                                case 2:
                                                    return "手机版";
                                                    break;
                                            };
                                        }
                                    }
                                    , {
                                        field: 'Model', title: '模板类别', width: 150, templet: function(d) {
                                            switch (d.Model) {
                                                case 0:
                                                    return "公用"
                                                    break;
                                                case 1:
                                                    return "列表页"
                                                    break;
                                                case 2:
                                                    return '详情页'
                                                    break;
                                                default:
                                                    return '';
                                                    break;
                                            };
                                        }
                                    }
                                    , {
                                        field: 'Intro', title: '模板描述'
                                    }
                                    , {
                                        field: 'IsHome', title: '首页模板', width: 120, align: "center", templet: function(d) {
                                            if (d.Type > 0) {
                                                return laySwitch.render(d.IsHome, 'home')
                                            } else {
                                                return '';
                                            }

                                        }
                                    }
                                    , {
                                        field: 'IsUsing', title: '是否启用', width: 120, align: "center", templet: function(d) {
                                            return laySwitch.render(d.IsUsing, 'use')
                                        }
                                    }
                                    , { fixed: 'right', title: '操作', toolbar: '#btTpl', width: 160 }
                                ]]
                                , page: true
                            });
                            table.on('toolbar(TemplateList)', function(obj) {
                                var checkStatus = table.checkStatus(obj.config.id);
                                switch (obj.event) {
                                    case 'add':
                                        frame.NavigateTo({
                                            url: "/lgm/recruit/Template/add",
                                            title: "添加模板"
                                        })
                                        break;
                                    case 'refresh':
                                        page.laytable.reload();
                                        break;
                                };
                            })
                            table.on('tool(TemplateList)', function(obj) {
                                var data = obj.data;
                                switch (obj.event) {
                                    case 'edit':
                                        frame.NavigateTo({
                                            url: "/lgm/recruit/Template/edit/" + data.Id,
                                            title: "编辑模板"
                                        })
                                        break;
                                    case 'use':
                                        laySwitch.do({
                                            obj: obj,
                                            key: "IsUsing",
                                            url: "/api/sys/recruit/EditTemplate",
                                            refresh: function() {
                                                page.laytable.reload();
                                            }
                                        })
                                        break;
                                    case 'del':
                                        layer.confirm('真的删除行么', function (index) {
                                            lg.request({
                                                url: "/Api/sys/recruit/deleteTemplate",
                                                method: "post",
                                                data: { id: data.Id },
                                                success: res => {
                                                    if (res.code == 0) {
                                                        obj.del();
                                                    }
                                                }
                                            })
                                            layer.close(index);
                                        });
                                        break;
                                };
                            })
                        });
                    },
                    reload: function() {
                        this.laytable.reload();
                    }
                },
                updated: function() {
                    layui.form.render();
                }
            }).mount("#lg-TemplateList")
        },
    }).mount();

</script>
